import { StyleSheet, Text, View, FlatList, Pressable, Modal, TextInput } from 'react-native';
import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import Icon from 'react-native-vector-icons/Ionicons';
import { NavBarHeader, ContentStatus } from '~/components';
import { delUserBtnSetting, getUserBtnSetting, saveUserBtnSetting } from '~/api/deviceApi';
import { px2dp, scale } from '~/utils/px2dp';
import { isPhoneValid } from '~/utils/rules';
import { formatTimestamp } from '~/utils/formatDate';

export default function DeviceReadCall() {
    const { t } = useTranslation();
    const [listData, setListData] = useState([]);
    const getList = () => {
        getUserBtnSetting().then((res) => {
            setListData(res.data);
        });
    };
    const del = () => {
        delUserBtnSetting().then((res) => {
            getList();
        });
    };
    const renderItem = ({ item, index }: any) => {
        return (
            <View style={[styles.listItem, styles.row]}>
                <View>
                    <Text style={styles.list_title}>
                        {t('DeviceReadCall.t10')}：
                        {item.type == 0
                            ? t('DeviceReadCall.t3')
                            : item.type == 1
                            ? t('DeviceReadCall.t4')
                            : item?.customize_phone}
                    </Text>
                    <Text style={styles.time}>
                        {t('DeviceReadCall.t11')}:{formatTimestamp(item.create_time, 1)}
                    </Text>
                </View>
                <Pressable style={styles.del_bt} onPress={del}>
                    <Text style={styles.del_text}> {t('DeviceReadCall.t13')}</Text>
                </Pressable>
            </View>
        );
    };
    // 添加设置
    const [visible, setVisible] = useState(false);
    const addBtn = () => {
        setVisible(true);
    };
    const [activeIndex, setActiveIndex] = useState(1);
    const [mobile, setMobile] = useState('');
    const save = () => {
        if (activeIndex == 3 && !mobile) {
            Toast.show({ content: t('DeviceReadCall.t8'), layout: 'top' });
            return;
        }
        if (activeIndex == 3 && !isPhoneValid(mobile)) {
            Toast.show({ content: t('DeviceReadCall.t9'), layout: 'top' });
            return;
        }
        saveUserBtnSetting({ type: activeIndex - 1, customize_phone: mobile }).then((res) => {
            Toast.show({ content: res.msg });
            getList();
            setVisible(false);
        });
    };
    useEffect(() => {
        getList();
    }, []);
    return (
        <View style={styles.container}>
            <NavBarHeader
                title={t('DeviceReadCall.title')}
                rightComponent={
                    <Pressable style={{ marginRight: px2dp(32) }} onPress={addBtn}>
                        <Text style={styles.right_title}>
                            {listData.length > 0 ? t('DeviceReadCall.t12') : t('DeviceReadCall.t1')}
                        </Text>
                    </Pressable>
                }
            />
            <FlatList
                contentContainerStyle={styles.contentStyle}
                keyExtractor={(item: any) => item.id}
                data={listData}
                renderItem={renderItem}
                ListEmptyComponent={<ContentStatus status="empty" />}
            />
            <Modal transparent={true} visible={visible} statusBarTranslucent={true} hardwareAccelerated={true}>
                <View style={styles.modalOverlay}>
                    <View style={[styles.modalContent]}>
                        <View style={[styles.row, { justifyContent: 'space-between' }]}>
                            <View />
                            <Text style={styles.title}>{t('DeviceReadCall.t2')}</Text>
                            <Pressable
                                onPress={() => {
                                    setVisible(false);
                                }}>
                                <Icon name={'close-sharp'} size={px2dp(40)} color={'#666666'}></Icon>
                            </Pressable>
                        </View>
                        <View style={[styles.content]}>
                            <View style={[styles.row, { flexWrap: 'wrap' }]}>
                                <Pressable
                                    style={[styles.list_item, activeIndex == 1 && styles.in_select]}
                                    onPress={() => setActiveIndex(1)}>
                                    <Text style={[styles.roleName, activeIndex == 1 && styles.in_select_text]}>
                                        {t('DeviceReadCall.t3')}
                                    </Text>
                                </Pressable>
                                <Pressable
                                    style={[styles.list_item, activeIndex == 2 && styles.in_select]}
                                    onPress={() => setActiveIndex(2)}>
                                    <Text style={[styles.roleName, activeIndex == 2 && styles.in_select_text]}>
                                        {t('DeviceReadCall.t4')}
                                    </Text>
                                </Pressable>
                                <Pressable
                                    style={[styles.list_item, activeIndex == 3 && styles.in_select]}
                                    onPress={() => setActiveIndex(3)}>
                                    <Text style={[styles.roleName, activeIndex == 3 && styles.in_select_text]}>
                                        {t('DeviceReadCall.t5')}
                                    </Text>
                                </Pressable>
                            </View>
                            {activeIndex == 3 && (
                                <View style={styles.inputStyle}>
                                    <TextInput
                                        multiline={true}
                                        blurOnSubmit={false}
                                        keyboardType="numeric"
                                        returnKeyType={'done'}
                                        placeholderTextColor={'#a4a4a4'}
                                        placeholder={t('DeviceReadCall.t6')}
                                        style={styles.input}
                                        value={mobile}
                                        onChangeText={(val) => setMobile(val)}
                                    />
                                </View>
                            )}
                        </View>
                        <Pressable style={styles.bt} onPress={save}>
                            <Text style={styles.bt_text}>{t('DeviceReadCall.t7')}</Text>
                        </Pressable>
                    </View>
                </View>
            </Modal>
        </View>
    );
}

const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    container: {
        flex: 1,
    },
    contentStyle: {
        flexGrow: 1,
        paddingBottom: '20%',
    },
    right_title: {
        color: '#25C8C8',
        fontWeight: 'bold',
        fontSize: scale(28),
    },
    modalOverlay: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    modalContent: {
        backgroundColor: '#fff',
        padding: px2dp(24),
        borderRadius: px2dp(48),
        width: '90%',
    },
    title: {
        color: '#000',
        fontWeight: 'bold',
        fontSize: scale(30),
        textAlign: 'center',
    },
    content: {
        marginTop: px2dp(32),
    },
    list_item: {
        backgroundColor: '#F8F8F8',
        padding: px2dp(24),
        borderRadius: px2dp(12),
        width: px2dp(180),
        marginRight: px2dp(24),
    },
    roleName: {
        textAlign: 'center',
        fontSize: scale(28),
        color: '#191919',
    },
    in_select: {
        borderWidth: px2dp(2),
        borderColor: '#25C8C8',
    },
    in_select_text: {
        color: '#25C8C8',
    },
    bt: {
        backgroundColor: '#25C8C8',
        justifyContent: 'center',
        height: px2dp(80),
        borderRadius: px2dp(16),
        marginTop: px2dp(64),
    },
    bt_text: {
        color: '#fff',
        fontSize: scale(32),
        fontWeight: 'bold',
        textAlign: 'center',
    },
    inputStyle: {
        borderWidth: px2dp(2),
        borderColor: '#eee',
        marginTop: px2dp(64),
        borderRadius: px2dp(12),
        justifyContent: 'center',
        alignItems: 'center',
        height: px2dp(100),
        paddingLeft: px2dp(24),
    },
    input: {
        width: '100%',
        fontSize: scale(28),
    },
    listItem: {
        backgroundColor: '#fff',
        padding: px2dp(24),
        justifyContent: 'space-between',
    },
    list_title: {
        color: '#191919',
        fontSize: scale(30),
    },
    time: {
        color: '#a4a4a4',
        fontSize: scale(26),
        marginTop: px2dp(32),
    },
    del_bt: {
        backgroundColor: 'red',
        height: px2dp(60),
        justifyContent: 'center',
        alignItems: 'center',
        width: px2dp(160),
        borderRadius: px2dp(80),
    },
    del_text: {
        color: '#fff',
    },
});
